<script setup lang="ts">
import { ref } from "vue"
import { useRouter } from 'vue-router'
const nav = [
    {
        title: '智能检测',
        img: '/src/assets/智能检测.jpg',
        imgActive: '/src/assets/智能检测-active.jpg',
        active: true,
        path: '/'
    },
    {
        title: '就业态势',
        img: '/src/assets/就业态势.jpg',
        imgActive: '/src/assets/就业态势-active.jpg',
        active: false,
        path: '/employment'
    },
    {
        title: '安防管理',
        img: '/src/assets/安防管理.jpg',
        imgActive: '/src/assets/安防管理-active.jpg',
        active: false,
        path: '/safemanage'
    },
    {
        title: '设备运维',
        img: '/src/assets/设备运维.jpg',
        imgActive: '/src/assets/设备运维-active.jpg',
        active: false,
        path: '/equipment'
    }
]
const router = useRouter()

// 创建ref
const idx = ref(0)

// 点击切换
const handleTab = (index: number) => {
    // 赋值
    idx.value = index
    router.push(nav[index].path)
}
</script>

<template>
    <div class="nav">
        <div @click="handleTab(index)" :to="{ path: item.path }" v-for="(item, index) in nav" :key="item.title"
            class="nav-item">
            <img :src="index === idx ? item.imgActive : item.img" alt="">
            <p>{{ item.title }}</p>
        </div>
    </div>
</template>

<style scoped lang="scss">
.nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38%;
    background-image: url(../assets/菜单栏.png);
    background-repeat: no-repeat;
    height: 64px;
    background-size: 100% 100%;

    .nav-item {
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        margin: 0 2px;

        img {
            width: 40px;
            height: 40px;
        }

        p {
            padding: 0;
            margin: 0;
        }
    }
}
</style>